<template>
    <view class="assessment-container">
        <view class="assessment-list">
            <view class="assessment-item" v-for="(item, index) in assessments" :key="index" @click="startAssessment(item.id)">
                <view class="item-header">
                    <view class="icon-wrapper" :style="{ backgroundColor: item.color }">
                        <u-icon :name="item.icon" size="32" color="#fff"></u-icon>
                    </view>
                    <view class="title-wrapper">
                        <text class="title">{{item.title}}</text>
                        <text class="desc">{{item.description}}</text>
                    </view>
                </view>
                <view class="item-content">
                    <text class="count">共{{item.questionCount}}题</text>
                    <text class="time">预计{{item.estimatedTime}}分钟</text>
                </view>
                <view class="item-footer">
                    <text class="last-time" v-if="item.lastTime">上次评估：{{item.lastTime}}</text>
                    <text class="status" :class="item.status">{{getStatusText(item.status)}}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {request} from '@/util/request'

export default {
    data() {
        return {
            assessments: [
                {
                    id: 1,
                    title: '健康行为评估',
                    description: '评估您的日常健康行为习惯',
                    icon: 'heart',
                    color: '#FF4949',
                    questionCount: 20,
                    estimatedTime: 5,
                    lastTime: '2023-12-15',
                    status: 'completed'
                },
                {
                    id: 2,
                    title: '自我效能评估',
                    description: '评估您对健康管理的信心和能力',
                    icon: 'star',
                    color: '#19BE6B',
                    questionCount: 15,
                    estimatedTime: 3,
                    lastTime: '',
                    status: 'not_started'
                }
            ]
        }
    },
    methods: {
        async loadAssessments() {
            try {
                const res = await request.get('/api/assessment/list')
                if (res.code === 200) {
                    this.assessments = res.data
                }
            } catch (error) {
                console.log(error)
            }
        },
        
        startAssessment(id) {
            uni.navigateTo({
                url: `/pages/assessment/detail?id=${id}`
            })
        },
        
        getStatusText(status) {
            const statusMap = {
                'not_started': '未开始',
                'in_progress': '进行中',
                'completed': '已完成'
            }
            return statusMap[status] || ''
        }
    },
    onLoad() {
        this.loadAssessments()
    }
}
</script>

<style lang="less" scoped>
.assessment-container {
    min-height: 100vh;
    background-color: #F8F8F8;
    padding: 20rpx;
    
    .assessment-list {
        .assessment-item {
            background-color: #fff;
            border-radius: 16rpx;
            padding: 30rpx;
            margin-bottom: 20rpx;
            
            .item-header {
                display: flex;
                align-items: center;
                margin-bottom: 20rpx;
                
                .icon-wrapper {
                    width: 80rpx;
                    height: 80rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 20rpx;
                }
                
                .title-wrapper {
                    flex: 1;
                    
                    .title {
                        font-size: 32rpx;
                        font-weight: bold;
                        color: #333;
                        margin-bottom: 10rpx;
                        display: block;
                    }
                    
                    .desc {
                        font-size: 24rpx;
                        color: #999;
                    }
                }
            }
            
            .item-content {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20rpx;
                
                text {
                    font-size: 28rpx;
                    color: #666;
                }
            }
            
            .item-footer {
                display: flex;
                justify-content: space-between;
                align-items: center;
                
                .last-time {
                    font-size: 24rpx;
                    color: #999;
                }
                
                .status {
                    font-size: 24rpx;
                    padding: 4rpx 16rpx;
                    border-radius: 20rpx;
                    
                    &.not_started {
                        background-color: #F2F6FC;
                        color: #909399;
                    }
                    
                    &.in_progress {
                        background-color: #FDF6EC;
                        color: #E6A23C;
                    }
                    
                    &.completed {
                        background-color: #E1F3D8;
                        color: #67C23A;
                    }
                }
            }
        }
    }
}
</style> 